<template>
  <!--详情对话框 start-->
  <el-dialog draggable destroy-on-close v-model="dialogDescVisible" title="我的权限" width="35%" center>
    <el-tag v-for="role in descInfo.list" :key="role.roleId" size="large" effect="light" class="mx-1" round
            type="success">
      {{ role.roleName }}:[{{ role.roleDesc }}]
    </el-tag>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogDescVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <!--详情对话框 end-->

  <div class="container">
    <!-- 左侧开关 start-->
    <div class="toggle">
      <el-icon class="icon" v-if="dataStore.isCollapse" @click="dataStore.isCollapse=false">
        <Expand/>
      </el-icon>
      <el-icon class="icon" v-else @click="dataStore.isCollapse=true">
        <Fold/>
      </el-icon>
    </div>
    <!-- 左侧开关 end-->

    <!-- 用户 start-->
    <div class="choice-list">
      <div @click="reload" class="choice-item">
        <el-icon class="icon">
          <RefreshRight/>
        </el-icon>
        刷新
      </div>
      <div class="choice-item" @click="">
        <el-icon class="icon">
          <List/>
        </el-icon>
        <a style=" text-decoration: none;color: inherit;"
           href="https://awqk91df13q.feishu.cn/docx/JeiedmdRWoJf8Zx06v2cnZd1nIh?from=from_copylink"
           target="_blank">文档</a>
      </div>
      <div class="choice-item" @click="toggleFullscreen">
        <el-icon class="icon">
          <ChromeFilled/>
        </el-icon>
        全屏
      </div>
      <div class="choice-item">
        <el-dropdown>
          <div class="user">
            <el-avatar class="img" :src="dataStore.adminImg"></el-avatar>
            <p>{{ dataStore.adminName }}</p>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleDesc(dataStore.adminId)">我的权限</el-dropdown-item>
              <el-dropdown-item @click="router.push('/home/center')">个人中心</el-dropdown-item>
              <el-dropdown-item @click="handleEdit(dataStore.adminId)">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logoutHandler">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 用户 end-->

    <!--修改密码对话框 start-->
    <el-dialog draggable destroy-on-close v-model="dialogEditorVisible" title="修改密码" width="30%" center>
      <el-form :inline="true" :model="editorFormInfo" label-width="120px">
        <el-form-item label="用户名">
          <el-input disabled v-model="editorFormInfo.adminName"></el-input>
        </el-form-item>
        <el-form-item label="旧密码">
          <el-input disabled></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="editorFormInfo.adminPassword"></el-input>
        </el-form-item>
        <el-form-item label="再次确认">
          <el-input disabled></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogEditorVisible = false">取消</el-button>
                        <el-button type="primary" @click="sureEditorHandler">确定</el-button>
                    </span>
      </template>
    </el-dialog>
    <!--修改密码对话框 end-->
  </div>
</template>
<script setup>
import {useRouter} from "vue-router"
import sysAxios from "@/api/sys.js"
import {useDataStore} from "@/stores/dataStore"
import {reactive, ref} from "vue";

const router = useRouter()


const dataStore = useDataStore()
/**
 * 刷新页面
 */
const reload = () => {
  location.reload();
}
/**
 * 退出登录
 */
const logoutHandler = () => {
  sysAxios.sys_logout().then(res => {
    if (res.data.code == 200) {
      dataStore.islogin = false
      dataStore.adminName = ""
      dataStore.adminImg = ""
      router.push("/home/login")
    }
  })
}
/**
 * 全屏
 */
const toggleFullscreen = () => {
  const element = document.documentElement;
  if (!document.fullscreenElement) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  adminId: '',
  adminImg: '',
  adminName: "",
  adminPassword: "",
  adminPhone: "",
  adminEmail: "",
  adminStatus: '',
})
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (id) => {
  dialogEditorVisible.value = true
  sysAxios.admin_findById({
    adminId: id
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.adminId = res.data.data.adminId;
      editorFormInfo.adminName = res.data.data.adminName;
      editorFormInfo.adminPassword = '';
      editorFormInfo.adminEmail = res.data.data.adminEmail;
      editorFormInfo.adminPhone = res.data.data.adminPhone;
      editorFormInfo.adminStatus = res.data.data.adminStatus;
      editorFormInfo.adminImg = res.data.data.adminImg;
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  sysAxios.admin_update({
    adminId: editorFormInfo.adminId,
    adminName: editorFormInfo.adminName,
    adminEmail: editorFormInfo.adminEmail,
    adminPhone: editorFormInfo.adminPhone,
    adminPassword: editorFormInfo.adminPassword,
    adminStatus: editorFormInfo.adminStatus,
    adminImg: editorFormInfo.adminImg,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http()
    }
  })
}
/**
 * 角色详情
 */
//详情对话框控制器
const dialogDescVisible = ref(false)
//初始化详情对话框
const descInfo = reactive({
  list: []
})
const handleDesc = (id) => {
  dialogDescVisible.value = true
  sysAxios.admin_findById({
    adminId: id
  }).then(res => {
    if (res.data.code == 200) {
      descInfo.list = res.data.data.roles
    }
  })
}
</script>
<style scoped lang="scss">
.container {
  background-color: #3c8dbc;
  width: 100%;
  height: 50px;
  display: flex;
  position: fixed;
  top: 0;
  z-index: 100;
  margin-bottom: 60px;

  .toggle {
    padding: 10px;

    .icon {
      color: #ffffff;
      font-size: 30px;
      cursor: pointer;
    }
  }
}

.choice-list {
  display: flex;
  position: fixed;
  right: 5px;

  .choice-item {
    text-align: center;
    width: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 10px;
    cursor: pointer;
    color: #ffffff;
    font-weight: bolder;
    font-size: 18px;
    display: flex;

    .icon {
      margin-top: 5px;
      padding-right: 5px;
    }

    .user {
      display: flex;


      .img {
        width: 30px;
        height: 30px;
      }

      p {
        line-height: 30px;
        color: #ffffff;
        margin-left: 5px;
      }
    }
  }

  .choice-item:hover {
    background-color: #367fa9;
  }
}

</style>
